<!-- 待审核账单页面 -->
<template>
  <div>
    <!-- 表单区域 -->
    <el-card class="margin-bottom">
      <el-form
        :inline="true"
        :model="searchCriteria"
        :rules="rules"
        ref="searchCriteria"
        class=" padding-top-sm flex justify-between"
        size="mini"
      >
        <el-form-item label="客户" prop="customer">
          <el-select v-model="searchCriteria.customer" filterable> </el-select>
        </el-form-item>

        <el-form-item label="销售" prop="sale">
          <el-select v-model="searchCriteria.sale" filterable> </el-select>
        </el-form-item>

        <el-form-item label="名称" prop="name">
          <el-input v-model="searchCriteria.name" />
        </el-form-item>

        <el-form-item label="备注" prop="remarks">
          <el-input v-model="searchCriteria.remarks" />
        </el-form-item>

        <el-form-item label="已审批" prop="approved">
          <el-select v-model="searchCriteria.approved" filterable>
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-button-group>
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="submitForm('searchCriteria')"
            >搜索</el-button
          >
          <el-button size="mini" @click="resetForm('searchCriteria')"
            >重置</el-button
          >
        </el-button-group>
      </el-form>
    </el-card>
    <!-- 按钮 -->
    <el-button-group>
      <el-button type="primary" size="mini">批量审核销账</el-button>
      <el-button type="primary" size="mini">批量标记已销账</el-button>
    </el-button-group>
    <!--分页-->
    <el-card class="margin-top">
      <div class=" padding-bottom-sm">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[20, 40, 60, 80, 100]"
          :page-size="20"
          layout="prev, pager, next, jumper, sizes,total"
          :total="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!--表格区域-->
      <el-table :data="tableData" stripe class="text-sm">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="客户名" prop="customer"></el-table-column>
        <el-table-column label="销售" prop="sale"></el-table-column>
        <el-table-column label="账单名" prop="billName"></el-table-column>
        <el-table-column label="水单" prop="waterBillr">
          <!-- 点击查看按钮 -->
          <template slot-scope="scope">
            <el-button @click="dialogSeeVisible = true" type="text" size="small"
              >查看</el-button
            >
            <!-- 弹出水单页面 -->
            <el-dialog title="水单" :visible.sync="dialogSeeVisible">
              <el-table class="text-sm">
                <el-table-column
                  label="水单金额"
                  prop="waterWillmoney"
                ></el-table-column>
                <el-table-column label="图片" prop="images"></el-table-column>
                <el-table-column
                  label="水单金额"
                  prop="waterWillmoney"
                ></el-table-column>
                <el-table-column label="图片" prop="images"></el-table-column>
              </el-table>
            </el-dialog>
          </template>
        </el-table-column>
        <el-table-column label="总金额" prop="totalAmount"></el-table-column>
        <el-table-column label="余额" prop="balance"></el-table-column>
        <el-table-column label="已审批" prop="approved"></el-table-column>
        <el-table-column label="备注" prop="remarks"></el-table-column>
        <el-table-column label="创建人" prop="founder"></el-table-column>
        <el-table-column label="创建时间" prop="createDate"></el-table-column>
        <el-table-column label="操作" prop="operation">
          <template slot-scope="scope">
            <el-dropdown>
              <el-button type="text" size="mini">更多</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button type="text" size="mini" class="text-black"
                    >审批销账</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button type="text" size="mini" class="text-black"
                    >标记已销账</el-button
                  >
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogSeeVisible: false,
      currentPage: 1,
      count: 1,
      searchCriteria: {
        customer: "",
        sale: "",
        name: "",
        remarks: "",
        approved: ""
      },
      rules: {
        customer: [{ required: true, message: "请输入客户", trigger: "blur" }]
      },
      tableData: [
        {
          remarks: ""
        }
      ]
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    submitForm(val) {
      this.$refs[val].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(val) {
      this.$refs[val].resetFields();
    }
  }
};
</script>
<style scoped>
.size_full {
  width: 100%;
}
</style>
